<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { CmsArticleSearch, CmsAuthor } from '@/types/cms';
  import { getAuthorList, getColumnList } from '@/api/cms';
  import { CmsArticleTypes } from '@/config/cms';

  const data = ref<Partial<CmsArticleSearch>>({});

  const emit = defineEmits(['submit']);

  const handleConfirm = () => {
    if (data.value.publishRange) {
      data.value.publishTime = `${data.value.publishRange[0]}TO${data.value.publishRange[1]}`;
    }
    emit('submit', data.value);
  };

  const handleReset = () => {
    data.value = {};
    emit('submit', {});
  };

  const authorList = ref<CmsAuthor[]>([]);
  const handleSearchAuthor = async (content: string) => {
    const res = await getAuthorList({
      content,
      pageIndex: 1,
      pageSize: 100,
    });
    authorList.value = res.data.data.list || [];
  };
  const columnList = ref<
    {
      label: string;
      value: string;
    }[]
  >([]);
  const initColumnData = async () => {
    try {
      const res = await getColumnList({});
      columnList.value = (res.data.data || []).map((col) => ({
        label: col.columnName,
        value: col.id,
      }));
    } finally {
      // do nothing
    }
  };

  onMounted(() => {
    initColumnData();
    handleSearchAuthor('');
  });
</script>

<template>
  <a-form :model="data" layout="vertical">
    <a-row :gutter="12">
      <a-col :flex="1">
        <a-row :gutter="12">
          <a-col :span="6">
            <a-form-item hide-label field="articleTitle">
              <a-input v-model="data.articleTitle" allow-clear>
                <template #prefix>标题</template>
              </a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="authorId">
              <a-select
                v-model="data.authorId"
                allow-clear
                allow-search
                :options="
                  authorList.map((i) => ({ label: i.authorName, value: i.id }))
                "
                @search="handleSearchAuthor"
              >
                <template #prefix>作者</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="columnId">
              <a-select
                v-model="data.columnId"
                allow-clear
                :options="columnList"
              >
                <template #prefix>栏目</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="state">
              <a-select
                v-model="data.state"
                allow-clear
                :options="[
                  { label: '草稿', value: 0 },
                  { label: '已发布', value: 1 },
                ]"
              >
                <template #prefix>状态</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="contentType">
              <a-select
                v-model="data.contentType"
                allow-clear
                :options="CmsArticleTypes"
              >
                <template #prefix>类型</template>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item hide-label field="publishRange">
              <a-range-picker
                v-model="data.publishRange"
                allow-clear
                :placeholder="['发布开始时间', '发布结束时间']"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col flex="none" style="width: 80px">
        <a-row :gutter="[12, 12]">
          <a-col>
            <a-button type="primary" @click="handleConfirm"> 搜索 </a-button>
          </a-col>
          <a-col><a-button @click="handleReset">重置</a-button></a-col>
        </a-row>
      </a-col>
    </a-row>
  </a-form>
</template>
